<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2020-9-5
  Time: 11:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title333</title>

    <!-- 引入jquery -->
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/jquery-1.11.3.min.js"></script>
    <!-- 引入 ECharts -->
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/echarts.min.js"></script>
    <!--引入地图china-->
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/china.js"></script>
    <%--引入各大城市地图坐标--%>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/js/geoCoordMap.js"></script>

</head>
<body>


<div id="main" style="width: 800px;height:600px;"></div>

<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));

    //加载数据
    $.ajax({
        url: '<%=request.getContextPath()%>/company/loadCompanyAirway',  //加载后端数据
        type: 'POST',
        async: false,
        cache: false,
        dataType: 'json',
        success: function (data) {      //data得到后端传来的数据
            // var myserie = JSON.stringify(data);   //json数组对象（ArrayList<Company>）转字符串
            var companyList = [];
            for(var i=0 ; i<data.length;i++){
                companyList[i] = data[i].companyName ;
            }


            var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
            //var planePath = 'arrow';
            var convertData = function (data) {
                var res = [];
                for (var i = 0; i < data.length; i++) {

                    var dataItem = data[i];

                    var fromCoord = geoCoordMap[dataItem.startCity];
                    var toCoord = geoCoordMap[dataItem.arriveCity];
                    if (fromCoord && toCoord) {
                        res.push({
                            fromName: dataItem.startCity,
                            toName: dataItem.arriveCity,
                            coords: [fromCoord, toCoord],
                            value: dataItem.frightAmount
                        });
                    }
                }
                return res;

            };

            var color = ['#ff4500','#ff7f50','#46bee9','#ffff00','#a6c84c', '#ffa022', '#228b22','#7fff00','#98fb98','#98fb98']; //航线的颜色
            var series = [];

            data.forEach(function (item, i) {
                series.push({
                        name: item.companyName,
                        type: 'lines',
                        zlevel: 1,
                        effect: {
                            show: true,
                            period: 6,
                            trailLength: 0.7,
                            color: 'red', //arrow箭头的颜色
                            symbolSize: 3
                        },
                        lineStyle: {
                            normal: {
                                color: color[i],
                                width: 0,
                                curveness: 0.2
                            }
                        },
                        data: convertData(item.airwayList)
                    }, {
                        name: item.companyName,     //点击，城市坐标点消失
                        type: 'lines',
                        zlevel: 2,
                        symbol: ['none', 'arrow'],
                        symbolSize: 10,
                        effect: {
                            show: true,
                            period: 6,
                            trailLength: 0,
                            symbol: planePath,
                            symbolSize: 10
                        },
                        lineStyle: {
                            normal: {
                                color: color[i],
                                width: 1,
                                opacity: 0.6,
                                curveness: 0.2
                            }
                        },
                        data: convertData(item.airwayList)
                    }, {
                        name: item.companyName,            //到达点城市显示圆点
                        type: 'effectScatter',        //到达点
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        symbolSize: function (val) {
                            return 10;
                        },

                        itemStyle: {
                            normal: {
                                color: color[i],
                            },
                            emphasis: {
                                areaColor: '#2b91b7'
                            }
                        },

                        data: item.airwayList.map(function (dataItem) {
                            return {
                                name: dataItem.arriveCity,
                                value: geoCoordMap[dataItem.arriveCity].concat([dataItem.frightAmount])
                            };
                        })
                    }, {
                        name: item.companyName,        //出发点城市显示圆点
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        symbolSize: function (val) {
                            return 10;
                        },

                        itemStyle: {
                            normal: {
                                color: color[i],
                            },
                            emphasis: {
                                areaColor: '#2b91b7'
                            }
                        },
                        data: item.airwayList.map(function (dataItem) {
                            return {
                                name: dataItem.startCity,
                                value: geoCoordMap[dataItem.startCity].concat([dataItem.frightAmount])
                            };
                        })
                    }
                );
            });
            var option = {
                backgroundColor: '#404a59',
                title: {
                    text: '各航空公司航线图',
                    // subtext: '数据纯属虚构',

                    left: 'center',
                    textStyle: {
                        color: '#fbffff',
                        fontSize:30
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params, ticket, callback) { //鼠标放上去显示
                        if (params.seriesType == "effectScatter") {
                            return params.data.name + " : " + params.data.value[0] + " , " + params.data.value[1];

                        } else if (params.seriesType == "lines") {
                            return params.data.fromName + "-->" + params.data.toName + "  航班数：" + params.data.value + "<br />";
                        } else {
                            return params.name;
                        }
                    }
                },
                legend: {
                    orient: 'vertical',
                    top: 'bottom',
                    left: 'right',
                    // data: ['南方航空', '东方航空', '厦门航空', '中国国航', '海南航空', '四川航空', '成都航空', '深圳航空', '中国联合航空', '昆明航空'],
                    data:companyList,
                    textStyle: {
                        color: '#fbffff',
                        fontSize:20
                    },
                    selectedMode: 'multiple'
                },
                geo: {
                    map: 'china',
                    label: {
                        emphasis: {
                            show: true,
                            color: '#fff'
                        }
                    },
                    roam: true,
                    itemStyle: {
                        normal: {
                            // areaColor: '#00186E',
                            // color: 'rgba(51, 69, 89, .5)', //地图背景色
                            // borderColor: 'rgba(100,149,237,1)',//省市边界线
                            areaColor: '#323c48',
                            borderColor: '#61728a',
                            borderWidth: 1,
                        },
                        emphasis: {
                            areaColor: '#2a333d'
                        }
                    }
                },
                series: series
            };

            myChart.setOption(option);
        }
    });
</script>

</body>
</html>
